<template>
  <div class="container">
    <div v-if="status == 1">
      <div class="noPaymeny">
        <img src="../../../static/img/noDataInfo.png" alt="" />
        <p>暂无工程款支付担保信息</p>
        <el-button
          type="primary"
          class="commonBut saveBtn"
          @click="add"
          v-if="isConstructor"
          >添加工程款支付担保信息</el-button
        >
      </div>
    </div>
    <div v-if="status == 2">
      <el-form :model="form" :rules="rules" label-width="160px" ref="formData">
        <el-form-item label="工程款支付担保方式:" prop="assureWay">
          <el-radio-group v-model="form.assureWay">
            <el-radio
              :label="item.code"
              v-for="item in guaranteeTypeList"
              :key="item.code"
              >{{ item.name }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <el-form-item label="担保单位名称:" prop="assureName">
          <el-input
            style="width: 230px"
            placeholder="请输入"
            v-model="form.assureName"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="担保金额:" prop="assureMoney">
          <el-input
            style="width: 230px"
            placeholder="请输入"
            v-model="form.assureMoney"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="支付担保有效期:" prop="startTime">
          <timeSelection
            style="width: 230px"
            :startTime="form.startTime"
            :endTime="form.endTime"
            @getStartTimeValue="getStartTimeValue"
            @getEndTimeValue="getEndTimeValue"
          ></timeSelection>
        </el-form-item>
        <el-row>
          <el-col :span="24">
            <el-form-item
              label="工程款支付保函凭证:"
              label-width="160px"
              prop="managerUpLoadFile"
            >
              <uploadAnnex
                @getFileList="getFileListManager"
                :limitationFactor="limitationFactorManager"
                @getFile="getFileManager"
                :upLoadFile="managerUpLoadFile"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" v-model="form.managerImgUrl">
            <elementImage
              :upLoadFile="managerUpLoadFile"
              :srcList="managerSrcList"
              :oldSrcList="managerOldSrcList"
              @changeSrcList="changeSrcList"
            ></elementImage>
          </el-col>
        </el-row>
        <el-row style="text-align: center; margin-top: 20px">
          <el-col :span="12">
            <el-button
              class="commonBut saveBtn"
              type="primary"
              @click="saveAdd"
              v-sdc
              :loading="isLoading"
              >保存</el-button
            >
            <el-button class="commonBut cancelBtn" @click="cancelSubmit" v-sdc
              >取消</el-button
            >
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div v-if="status == 3">
      <el-row class="paymentTitle">
        <el-col :span="12">
          <div class="paymentInfoTitle">工程款支付担保详情</div>
        </el-col>
        <el-col :span="12" style="text-align: right"
          ><el-button
            class="commonBut saveBtn funComBut"
            icon="el-icon-edit"
            @click="edit"
            v-if="isConstructor"
            >修改</el-button
          ></el-col
        >
      </el-row>
      <table cellspacing="0" cellpadding="0" class="paymentInfo">
        <tbody>
          <tr>
            <td class="title">工程款支付担保方式</td>
            <td>
              {{ form.assureWay == 'BANK' ? '银行保函' : '专业机构担保' }}
            </td>
            <td class="title">担保单位名称</td>
            <td>{{ form.assureName }}</td>
          </tr>
          <tr>
            <td class="title">担保金额</td>
            <td>{{ form.assureMoney }}</td>
            <td class="title">支付担保有效期</td>
            <td>{{ form.startTime }} 至 {{ form.endTime }}</td>
          </tr>
          <tr>
            <td class="title">工程款支付保函凭证</td>
            <td colspan="4">
              <el-image
                style="width: 60px; height: 60px; margin-right: 15px"
                v-for="(item, index) in managerSrcList"
                :key="index"
                :src="item"
                :preview-src-list="managerOldSrcList"
              >
              </el-image>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    var checkMoney = (rule, value, callback) => {
      if (!value) {
        callback()
      } else {
        var rePayTotal =
          /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/
        if (!rePayTotal.test(value) || value == 0.0 || value == 0.0) {
          callback(new Error('金额格式不正确,必须大于0,最多带有2位小数'))
        } else {
          if (value >= 100000000000) {
            callback(new Error('金额需小于1000亿'))
          } else {
            callback()
          }
        }
      }
    }
    var checkRegNo = (rule, value, callback) => {
      console.log(this.form.startTime)
      if (!this.form.startTime) {
        callback(new Error('请选择担保有效期开始日期'))
      } else if (!this.form.endTime) {
        callback(new Error('请选择担保有效期结束日期'))
      } else {
        callback()
      }
    }
    var validateManagerUpLoadFile = (rele, value, callback) => {
      if (this.managerUpLoadFile.length < 1) {
        return callback(new Error('必须上传工程款支付保函凭证'))
      } else {
        callback()
      }
    }
    return {
      status: 1,
      guaranteeTypeList: [],
      form: {
        assureWay: '',
        assureName: '',
        assureMoney: '',
        startTime: '',
        endTime: '',
        files: [],
      },
      value1: [],
      rules: {
        assureWay: [
          { required: true, message: '请选择担保方式', trigger: 'change' },
        ],
        assureName: [
          {
            required: true,
            message: '请输入担保单位名称',
            trigger: 'blur',
            max: 30,
          },
        ],
        assureMoney: [
          { required: true, message: '请输入担保金额', trigger: 'blur' },
          { validator: checkMoney, trigger: 'blur' },
        ],
        startTime: [
          { required: true, validator: checkRegNo, trigger: 'change' },
        ],
        managerUpLoadFile: [
          {
            required: true,
            validator: validateManagerUpLoadFile,
            trigger: 'change',
          },
        ],
      },
      limitationFactorManager: {
        uploadAnnexUrl: 'api-f/files/upload', //自定义上传文件接口地址
        upLoadFileLength: 5, //自定义上传文件最大数量设置
        fileSize: 2, //自定义上传文件最大设置
        messagetip: '仅支持上传png、jpg、jpeg格式文件，大小不超过2M', //自定义报错提示语
        formatType: 'typeOne', //自定义上传格式校验类型
        fileId: 'managerFiles', //自定义id解决一个页面包含多个上传附件
        uploadFormId: 'managerFilesForm', //自定义id解决一个页面包含多个上传附件
        methodTip:
          '请上传支付保函凭证，以备监管单位查看，最多上传5张照片，要求图片格式为jpg、png、jpeg，最大不超过2M', //自定义上传文件提示
        uploadBtnType: 'typeOne', //自定义上传按钮类型
      },
      managerUpLoadFile: [], //项目经理资质附件
      managerSrcList: [],
      managerOldSrcList: [],
      isLoading: false,
      isConstructor: false,
    }
  },
  mounted() {
    this.projectId = this.$route.query.projectId
    this.getProjectGuaranteeInfo(this.projectId)

    if (this.$store.state.userType === 'COMPANY') {
      if (localStorage.getItem('judgeRoleCode') == 'owner') {
        this.isConstructor = true
      } else {
        this.isConstructor = false
      }
    } else {
      this.isConstructor = false
    }
  },
  methods: {
    /**
     * @name: 获取项目支付担保table详情 By dengyaowei
     * @param {string} projectId 项目id
     * @Author: 471826078@qq.com
     */
    getProjectGuaranteeInfo(projectId) {
      this.axios
        .post('api-p/projectguarantee/expand/findProjectGuaranteeById', {
          projectId,
        })
        .then((res) => {
          if (!res.data.hasError) {
            if (res.data.errorMsg) {
              this.status = 1
            } else {
              this.status = 3
              this.form = res.data.result
              this.managerUpLoadFile = this.form.contractFiles
              if (this.managerUpLoadFile.length > 0) {
                this.managerSrcList = []
                this.managerOldSrcList = []
                for (var i = 0; i < this.managerUpLoadFile.length; i++) {
                  this.managerSrcList.push(this.managerUpLoadFile[i].url)
                  this.managerOldSrcList.push(this.managerUpLoadFile[i].url)
                }
              }
            }
          } else {
            this.$message({
              type: 'error',
              message: res.data.errorMsg,
            })
          }
        })
    },
    /**
     * @name: 获取项目支付担保类型列表 By dengyaowei
     * @param {*}
     * @Author: 471826078@qq.com
     */
    getGuaranteeTypeList() {
      this.axios
        .post('api-p/projectguarantee/expand/findProjectGuaranteeType')
        .then((res) => {
          if (!res.data.hasError) {
            this.guaranteeTypeList = res.data.result
          } else {
            this.$message({
              type: 'error',
              message: res.data.errorMsg,
            })
          }
        })
    },
    add() {
      this.status = 2
      this.getGuaranteeTypeList()
    },
    edit() {
      this.status = 2
      this.getGuaranteeTypeList()
      // this.getProjectGuaranteeInfo(this.projectId)
    },
    saveAdd() {
      this.$refs['formData'].validate((valid) => {
        if (valid) {
          this.isLoading = true
          const { assureWay, assureName, startTime, assureMoney, endTime, id } =
            this.form
          const params = {
            assureWay,
            assureName,
            startTime,
            assureMoney,
            endTime,
          }
          params.projectId = this.projectId
          params.files = JSON.stringify(this.managerUpLoadFile)
          let url
          if (id) {
            url = 'api-p/projectguarantee/expand/updateProjectGuarantee'
            params.id = id
          } else {
            url = 'api-p/projectguarantee/expand/createProjectGuarantee'
          }
          this.axios.post(url, params).then((res) => {
            if (!res.data.hasError) {
              this.$message({
                type: 'success',
                message: `工程款支付担保信息${id ? '修改' : '新增'}成功`,
              })
              this.getProjectGuaranteeInfo(this.projectId)
            } else {
              this.$message({
                type: 'error',
                message: res.data.errorMsg,
              })
            }
            this.isLoading = false
          })
        }
      })
    },
    cancelSubmit() {
      if (this.form.id) {
        this.status = 3
        this.getProjectGuaranteeInfo(this.projectId)
      } else {
        this.status = 1
        this.form = {
          assureWay: 1,
          assureName: '',
          assureMoney: '',
          startTime: '',
          endTime: '',
          files: [],
        }
      }
    },
    getFileListManager(val) {
      this.managerOldSrcList.push(val)
      this.managerSrcList.push(val)
    },
    getFileManager(val) {
      this.managerUpLoadFile = val
    },
    changeSrcList(val) {
      this.managerSrcList = val
    },
    getStartTimeValue(val) {
      this.form.startTime = val
    },
    getEndTimeValue(val) {
      this.form.endTime = val
    },
  },
}
</script>
<style lang="less" scoped>
.container {
  padding: 24px;
  min-height: 600px;
}
.noPaymeny {
  padding-top: 140px;
  img {
    display: block;
    width: 170px;
    height: 124px;
    margin: 0 auto 15px;
  }
  p {
    line-height: 14px;
    font-size: 14px;
    color: #999;
    text-align: center;
  }
  .el-button {
    display: block;
    width: 184px;
    margin: 40px auto 0;
  }
}
.paymentInfoTitle {
  position: relative;
  padding-left: 15px;
  height: 24px;
  line-height: 24px;
  font-size: 14px;
  color: #333;
  &::before {
    content: '';
    background-color: #009588;
    width: 4px;
    top: 0;
    left: 0;
    bottom: 0;
    position: absolute;
  }
}
.paymentInfo {
  width: 100%;
  margin-top: 16px;
  border-top: 1px solid #d5dee7;
  border-left: 1px solid #d5dee7;
  td {
    padding: 16px 18px;
    color: #666;
    border-bottom: 1px solid #d5dee7;
    border-right: 1px solid #d5dee7;
  }
  .title {
    width: 170px;
    font-size: 14px;
    color: #333;
    background: #f5f7fb;
    font-weight: 500;
    text-align: right;
  }
  .nodataTd {
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
  }
}
</style>
